
<script type="text/x-red" data-template-name="csv">
    <div class="form-row">
        <label for="node-input-temp"><i class="fa fa-list"></i> <span data-i18n="csv.label.columns"></span></label>
        <input type="text" id="node-input-temp" data-i18n="[placeholder]csv.placeholder.columns">
    </div>
    <div class="form-row">
        <label for="node-input-select-sep"><i class="fa fa-text-width"></i> <span data-i18n="csv.label.separator"></span></label>
            <select style="width:150px" id="node-input-select-sep">
                <option value="," data-i18n="csv.separator.comma"></option>
                <option value="\t" data-i18n="csv.separator.tab"></option>
                <option value=" " data-i18n="csv.separator.space"></option>
                <option value=";" data-i18n="csv.separator.semicolon"></option>
                <option value=":" data-i18n="csv.separator.colon"></option>
                <option value="#" data-i18n="csv.separator.hashtag"></option>
                <option value="" data-i18n="csv.separator.other"></option>
           </select>
           <input style="width:40px;" type="text" id="node-input-sep" pattern=".">
    </div>

    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
        <input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">
    </div>
    <hr align="middle"/>
    <div class="form-row">
        <label style="width:100%; border-bottom: 1px solid #eee;"><span data-i18n="csv.label.c2o"></span></label>
    </div>
    <div class="form-row" style="padding-left: 20px;">
        <label><i class="fa fa-sign-in"></i> <span data-i18n="csv.label.input"></span></label>
        <input style="width:20px; vertical-align:top; margin-right: 5px;" type="checkbox" id="node-input-hdrin"><label style="width: auto;" for="node-input-hdrin"><span data-i18n="csv.label.firstrow"></span>
    </div>
    <div class="form-row" style="padding-left: 20px;">
        <label><i class="fa fa-sign-out"></i> <span data-i18n="csv.label.output"></span></label>
        <select type="text" id="node-input-multi" style="width: 250px;">
            <option value="one" data-i18n="csv.output.row"></option>
            <option value="mult" data-i18n="csv.output.array"></option>
        </select>
    </div>
    <div class="form-row" style="margin-top: 20px">
        <label style="width:100%; border-bottom: 1px solid #eee;"><span data-i18n="csv.label.o2c"></span></label>
    </div>
    <div class="form-row" style="padding-left: 20px;">
        <label><i class="fa fa-sign-in"></i> <span data-i18n="csv.label.output"></span></label>
        <input style="width:20px; vertical-align:top; margin-right: 5px;" type="checkbox" id="node-input-hdrout"><label style="width:auto;" for="node-input-hdrout"><span data-i18n="csv.label.includerow"></span></span>
    </div>
    <div class="form-row" style="padding-left: 20px;">
        <label></label>
        <label style="width: auto; margin-right: 10px;" for="node-input-ret"><span data-i18n="csv.label.newline"></span></label>
        <select style="width:150px;" id="node-input-ret">
            <option value='\n' data-i18n="csv.newline.linux"></option>
            <option value='\r' data-i18n="csv.newline.mac"></option>
            <option value='\r\n' data-i18n="csv.newline.windows"></option>
       </select>
    </div>
</script>

<script type="text/x-red" data-help-name="csv">
    <p>Converts between a CSV formatted string and its JavaScript object representation, in either direction.</p>
    <h3>Inputs</h3>
    <dl class="message-properties">
        <dt>payload<span class="property-type">object | array | string</span></dt>
        <dd>A JavaScript object, array or CSV string.</dd>
    </dl>
    <h3>Outputs</h3>
    <dl class="message-properties">
        <dt>payload<span class="property-type">object | array | string</span></dt>
        <dd>
        <ul>
            <li>If the input is a string it tries to parse it as CSV and creates a JavaScript object of key/value pairs for each line.
                The node will then either send a message for each line, or a single message containing an array of objects.</li>
            <li>If the input is a JavaScript object it tries to build a CSV string.</li>
            <li>If the input is an array of simple values, it builds a single line CSV string.</li>
            <li>If the input is an array of arrays, or an array of objects, a multiple-line CSV string is created.</li>
        </ul>
        </dd>
    </dl>
    <h3>Details</h3>
    <p>The column template can contain an ordered list of column names. When converting CSV to an object, the column names
    will be used as the property names. Alternatively, the column names can be taken from the first row of the CSV.</p>
    <p>When converting to CSV, the column template is used to identify which properties to extract from the object and in what order.</p>
    <p>If the input is an array then the columns template is only used to optionally generate a row of column titles.</p>
    <p><b>Note:</b> the column template must be comma separated - even if a different separator is chosen for the data.</p>
    </script>

<script type="text/javascript">
    RED.nodes.registerType('csv',{
        category: 'function',
        color:"#DEBD5C",
        defaults: {
            name: {value:""},
            sep: {value:',',required:true,validate:RED.validators.regex(/^.{1,2}$/)},
            //quo: {value:'"',required:true},
            hdrin: {value:""},
            hdrout: {value:""},
            multi: {value:"one",required:true},
            ret: {value:'\\n'},
            temp: {value:""}
        },
        inputs:1,
        outputs:1,
        icon: "parser-csv.png",
        label: function() {
            return this.name||"csv";
        },
        labelStyle: function() {
            return this.name?"node_label_italic":"";
        },
        oneditprepare: function() {
            if (this.sep == "," || this.sep == "\\t" || this.sep == ";" || this.sep == ":" || this.sep == " " || this.sep == "#") {
                $("#node-input-select-sep").val(this.sep);
                $("#node-input-sep").hide();
            } else {
                $("#node-input-select-sep").val("");
                $("#node-input-sep").val(this.sep);
                $("#node-input-sep").show();
            }
            $("#node-input-select-sep").change(function() {
                var v = $("#node-input-select-sep").val();
                $("#node-input-sep").val(v);
                if (v == "") {
                    $("#node-input-sep").val("");
                    $("#node-input-sep").show().focus();
                } else {
                    $("#node-input-sep").hide();
                }
            });
        }
    });
</script>
